<template>

	<div style="width: 1100px;">

		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{  path: '/adminHome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>业务管理</el-breadcrumb-item>
			<el-breadcrumb-item>小分类管理</el-breadcrumb-item>
		</el-breadcrumb>

		<el-card class="box-card" style="width: 1200px; margin-top: 1.875rem; margin-right: -100px;">

			<el-button type="primary" icon="el-icon-edit" style="float: left;margin-bottom: 0.625rem;" @click="tinajia">
				添加</el-button>


			<el-table :data="tableData" border style="width: 100%">
				


				<el-table-column type="index" label="#">
				</el-table-column>
				<el-table-column prop="minName" label="小分类名">
				</el-table-column>




				<el-table-column label="操作" width="200px">
					<template slot-scope="scope">
						<!-- {{scope.row.id}} -->
						<el-tooltip class="item" effect="light" content="修改" placement="top">
							<el-button type="primary" icon="el-icon-edit" size="mini"
								@click='updateminType(scope.row.minId)'>
							</el-button>
						</el-tooltip>
						<el-tooltip class="item" effect="light" content="删除" placement="top"
							>
							<el-button type="danger" icon="el-icon-delete" size="mini"
								@click="deleteType(scope.row.minId)"></el-button>
						</el-tooltip>
						
					</template>

				</el-table-column>
			</el-table>

			<!-- 添加分类 -->
			<el-dialog title="添加分类" :visible.sync="bigTypedvisible">

				<el-form :model="minType" status-icon :rules="rules" ref="ruleForm" label-width="100px"
					class="demo-ruleForm">
					<el-form-item label="分类名" prop="minName">
						<el-input type="text" v-model="minType.minName" autocomplete="off"></el-input>
					</el-form-item>
					
					<el-form-item label="分类名" prop="value">
						<el-select v-model="value" placeholder="请选择">
						    <el-option
						      v-for="item in options"
						      :key="item.bigId"
						      :label="item.bigName"
						      :value="item.bigId">
						    </el-option>
						  </el-select>
						  
					</el-form-item>

				</el-form>


				<div slot="footer" class="dialog-footer">
					<el-button @click="resetForm('ruleForm')">取 消</el-button>
					<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
				</div>
			</el-dialog>

			<!-- 修改分类 -->
			<el-dialog title="修改分类" :visible.sync="bigTypeaddvisible">

				<el-form :model="minType1" status-icon :rules="rules" ref="ruleForm" label-width="100px"
					class="demo-ruleForm">
					<el-form-item label="分类名" prop="minName">
						<el-input type="text" v-model="minType1.minName" autocomplete="off"></el-input>
					</el-form-item>
					
					<el-form-item label="分类名" prop="value">
						<el-select v-model="value1" placeholder="请选择">
						    <el-option
						      v-for="item in options"
						      :key="item.bigId"
						      :label="item.bigName"
						      :value="item.bigId">
						    </el-option>
						  </el-select>
						  
					</el-form-item>
					

				</el-form>


				<div slot="footer" class="dialog-footer">
					<el-button @click="resetForm1('ruleForm')">取 消</el-button>
					<el-button type="primary" @click="submitForm1('ruleForm')">确 定</el-button>
				</div>
			</el-dialog>

			
			
		</el-card>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				options:[],
				value:'',
				value1:'',
				rules: {
					minName: [{
							required: true,
							message: '请输入活动名称',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 5,
							message: '长度在 1 到 5 个字符',
							trigger: 'blur'
						}
					]
				},
				tableData: [],
				minType: {
					minName:''
				},
				minType1: {
					minName:'',
					minId:0
				
				},
				Bigame: '',
				bigTypedvisible: false,
				bigTypeaddvisible: false
				

			}
		},
		methods: {

			//删除小分类
			deleteType(id) {

				this.$confirm('确定删除小分类吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					var res = await this.$http.get('deleteMinTypeByMinId?minId='+id);
					this.queryAll()
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});


			},

			
			// 添加大分类
			tinajia() {
				this.bigTypedvisible = true
			},
			//重置
			resetForm(formName) {
				this.value=''
				this.$refs[formName].resetFields();
				this.bigTypedvisible = false
			},
			// 提交
			submitForm(formName) {
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						var param = new URLSearchParams()

						param.append('minName', this.minType.minName)
						param.append('bigId',this.value)
						var str = await this.$http.post('addMinType', param)
						if (str.data.code == 200) {
							this.$message('添加成功');
							this.bigTypedvisible = false
							this.bigType = {}
							this.queryAll();
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},

			//修改的重置
			resetForm1(formName) {
				this.$refs[formName].resetFields();
				this.bigTypeaddvisible = false
			},
			// 修改的提交
			submitForm1(formName) {
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						var param = new URLSearchParams()
						
						param.append('minName', this.minType1.minName)
						param.append('bigId',this.value1)
						param.append('minId',this.minType1.minId)
						var res = await this.$http.post('updateMinTypeByMinId',param)
						if (res.data.code == 200) {
							this.$message('修改成功');
							this.bigTypeaddvisible = false
							this.bigType = {}
							this.queryAll();
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},

			// 根据id查询小分类
			async updateminType(id) {
				var res = await this.$http.get('selectMinTypeByMinId?minId='+ id)
				this.minType1 = res.data.data
				console.log(res.data.data)
				this.value1=this.minType1.bigId
				this.bigTypeaddvisible=true
				
			},
			//查询全部
			async queryAll() {
				var res = await this.$http.post('selectAllMinType')
				this.tableData = res.data.data
				
				var ress=await this.$http.get('selectAllBigType')
				this.options=ress.data.data
				
			}


		},
		async mounted() {
			this.queryAll()

		}
	}
</script>

<style>
</style>
